<template>
  <div>
    <transition :name="transitionName">
      <router-view class="Router"></router-view>
    </transition>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home" to="/botnav/index">首页</van-tabbar-item>
      <van-tabbar-item icon="label-o" to="/botnav/list">分类</van-tabbar-item>
      <van-tabbar-item icon="search" to="/botnav/search">搜索</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/botnav/cart" :info="countsum">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/botnav/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      active: 0,
      transitionName: 'slide-right',
    }
  },
  created () {
    switch (this.$route.path) {
      case '/botnav/index':
        this.active = 0
        break
      case '/botnav/list':
        this.active = 1
        break
      case '/botnav/search':
        this.active = 2
        break
      case '/botnav/cart':
        this.active = 3
        break
      case '/botnav/mine':
        this.active = 4
        break
    }
  },
  computed: {
    ...mapGetters({
      countsum: 'countsum'
    })
  },
}
</script>
<style scoped>
.Router {
  position: absolute;
  width: 100%;
  transition: all 0.8s ease;
}
.silde-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
</style>
